<template>
  <!-- <van-nav-bar title="个人新装" left-text="" left-arrow> </van-nav-bar> -->
  <nut-noticebar :scrollable="false" :left-icon="false">
    <h4>{{ text }}</h4>
  </nut-noticebar>
  <van-space direction="vertical" fill :size="20">
    <van-cell title="业务介绍" class="title-1" value="" title-style="font-size:20px;font-weight:900" />

    <div style="margin: 0 10px; background: #f7f8fa; line-height: 30px; font-size: 16px"
      ><span style="color: #767677">
        本业务是为供电电压为220/380V的低压客户办理报装。例如住宅小区按一户一表形式建设成后新增或遗漏住户、宅基地住户等的新装情况。
      </span></div
    >
    <van-cell title="业务流程" size="large" class="title-1" value="" title-style="font-size:20px;font-weight:900" />
    <!-- <van-cell title="低压非居民性质" size="large" value="" title-style="font-size:16px;font-weight:700"/> -->
    <div class="" style="background-color: #fff; padding: 20px">
      <div class="" style="font-size: 16px; font-weight: 700; padding-bottom: 20px">低压非居民性质</div>
      <div style="display: flex">
        <div>
          <div class="step-head" style="width: 100px; /* height: 50px; */ position: relative; display: flex; justify-content: center">
            <div
              class="line"
              style="
                position: absolute;
                top: 14px;
                left: 50%;
                left: 50%;
                display: inline-block;
                height: 5px;
                width: 100%;
                background-color: #4aa3a1;
              "
            >
            </div>
            <div
              class="icon"
              style="
                border-radius: 50%;
                border: 5px solid #9ee4e3;
                width: var(--nut-steps-base-icon-width, 25px);
                height: var(--nut-steps-base-icon-height, 25px);
                line-height: var(--nut-steps-base-icon-line-height, 25px);
                font-size: var(--nut-steps-base-icon-font-size, 13px);
                background-color: #4eaca9;
                align-items: center;
                justify-content: center;
                z-index: 1;
              "
            >
              <div
                style="
                  color: #f7f8fa;
                  line-height: var(--nut-steps-base-icon-line-height, 25px);
                  font-size: var(--nut-steps-base-icon-font-size, 13px);
                  text-align: center;
                "
                >1</div
              >
            </div>
          </div>
          <div class="step-main" style="display: inline-block; padding-left: 17%; padding-right: 17%; text-align: center"
            ><span>受理签约</span></div
          >
        </div>

        <div>
          <div class="step-head" style="width: 100px; /* height: 50px; */ position: relative; display: flex; justify-content: center">
            <div
              class="line"
              style="
                position: absolute;
                top: 14px;
                left: 50%;
                left: 50%;
                display: inline-block;
                height: 5px;
                /* width: 100%; */
                background-color: #4aa3a1;
              "
            >
            </div>
            <div
              class="icon"
              style="
                border-radius: 50%;
                border: 5px solid #9ee4e3;
                width: var(--nut-steps-base-icon-width, 25px);
                height: var(--nut-steps-base-icon-height, 25px);
                line-height: var(--nut-steps-base-icon-line-height, 25px);
                font-size: var(--nut-steps-base-icon-font-size, 13px);
                background-color: #4eaca9;
                align-items: center;
                justify-content: center;
                z-index: 1;
              "
            >
              <div
                style="
                  color: #f7f8fa;
                  line-height: var(--nut-steps-base-icon-line-height, 25px);
                  font-size: var(--nut-steps-base-icon-font-size, 13px);
                  text-align: center;
                "
                >2</div
              >
            </div>
          </div>
          <div class="step-main" style="display: inline-block; padding-left: 17%; padding-right: 17%; text-align: center"
            ><span>施工接电</span></div
          >
        </div>
      </div>
    </div>
  </van-space>
  <van-cell title="该业务需提供以下合法证明" class="title-1" value="" title-style="flex: none;font-size:18px;font-weight:700" />
  <id-info :fatherMsg="idInfoObj1"></id-info>
  <id-info :fatherMsg="idInfoObj2"></id-info>

  <van-cell title="经办人办理必备" class="title-1" value="" title-style="font-size:18px;font-weight:700" />
  <id-info :fatherMsg="idInfoObj3"></id-info>
  <id-info :fatherMsg="idInfoObj4"></id-info>
  <van-button size="large" color="#4AA3A1" style="margin:5px;width: 97%;" @click="showPopup">开始办理</van-button>
  <!-- <van-popup v-model:show="show" :style="{ padding: '64px' }">内容</van-popup> -->
  <van-popup v-model:show="show" position="bottom" :style="{ height: '35%',background:'#FFFFFF' }" >
    <div style="display:flex;justify-content: space-around;;margin: 15px 15px 0 15px;">
      <div style="display:flex;flex-direction: column;justify-content: space-evenly;background-color: #F2F2F2;width: 126px;height: 200px;border-radius: 4%;">
        <div style="text-align: right;margin-top: -10px;">
          <bottom style="font-size: 8px;color: #fff;background-color: #4AA3A1;width: fit-content;border-radius: 6%;padding: 2px;">首次申请推荐</bottom>
        </div>
        <span style="font-size: 14px;margin-left: 8px;">对话式申请</span>
          <img src="./u159.png" alt="" style="width: 106px;height: 120px;margin-left: 10px;">
          <van-button color="#4AA3A1" style="width: 106px;height: 26px;margin-left: 10px;" @click="onSubmit2">选他</van-button>
      </div>

      <div style="display:flex;flex-direction: column;justify-content: space-evenly;background-color: #F2F2F2;width: 126px;height: 200px;border-radius: 4%;">
        <span style="font-size: 14px;text-align: center;">自助申请</span>
          <img src="./u160.png" alt="" style="width: 106px;height: 120px;margin-left: 10px;">
          <van-button color="#4AA3A1" style="width: 106px;height: 26px;margin-left: 10px;" @click="onSubmit3">选他</van-button>
      </div>
    </div>
  </van-popup>
</template>

<script lang="ts" setup name="application">
  import { computed } from 'vue';
  import { useUserStore } from '@/store/modules/user';
  import { setLang } from '@/i18n';
  import { useI18n } from 'vue-i18n';
  import { ref } from 'vue';
  import idInfo from './idInfo/index.vue';
  const text = ref('如果您未完善信息，请您在办理过程中先完善信息');
  const value = ref([{ url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' }]);
  let idInfoObj1 = {
    idName: '产权证明',
    idContent: '产权证/国有土地使用证/集体土地使用证/购房合同/法律文书/产权合法证明之—',
  };
  let idInfoObj2 = {
    idName: '身份证明',
    idContent: '身份证/军人证/护照/户口簿/台胞证及港澳身份证件/公安机关户籍证明之一',
  };
  let idInfoObj3 = {
    idName: '产权人身份证明（经办人办理时必备）',
    idContent: '身份证/军人证/护照/户口簿/台胞证及港澳身份证件/公安机关户籍证明之一',
  };
  let idInfoObj4 = {
    idName: '授权委托书',
    idContent: '点击查看',
    bottom: '参考模版',
  };
  const result = ref('');
  const showArea = ref(false);
  const checked = ref('2');
  const onConfirm = ({ selectedOptions }) => {
    showArea.value = false;
    result.value = selectedOptions.map((item) => item.text).join('/');
  };
  const onSubmit = (values) => {
    console.log('submit', values);
  };

  const { locale } = useI18n();

  let cellList = ['vue3', 'vite', 'vue-router', 'axios', 'Pinia', 'vue-i18n', 'postcss-px-to-viewport', 'varlet / vant / nutUI', 'eruda'];
  const userStore = useUserStore();
  const getUserInfo = computed(() => {
    const { name = '' } = userStore.getUserInfo || {};
    return name;
  });

  const changeLang = (type) => {
    setLang(type);
  };

  const show = ref(false);
  /**
   * 显示弹窗
   */
  const showPopup = () => {
    show.value = true;
  };
  const uRouter = useRouter();

  const onSubmit2 = (s) => {
    uRouter.push({
      // push方法
      path: '/test', //这里是跳转页面的name
      query: { type: s },
    });
  };
  const onSubmit3 = (s) => {
    window.location.href = 'https://vzdlyz.axshare.com/?id=syvoni&p=i%E5%9B%BD%E7%BD%91%E9%A6%96%E9%A1%B5-%E4%BD%9C%E4%B8%9A%E4%BA%BA%E5%91%98&g=1';
  };
  onMounted(() => {
    const html = document.documentElement;
    html.style.fontSize = '';
  });
</script>

<style lang="scss">
  .main-page {
    background: #f7fafd;
  }
  .title-1:before {
    position: absolute;
    content: '';
    left: 0;
    top: 42px;
    width: 9px;
    height: 60px;
    background: linear-gradient(90deg, rgba(97, 209, 211, 1) 35%, rgba(82, 181, 190, 1) 100%);
  }
  :root {
    --van-cell-line-height: 100px;
  }
  .clearfix::after {
    content: '';
    display: table;
    clear: both;
  }
  .card-left {
    width: 120px;
    height: 120px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    background-color: var(--nut-card-left-background-color, inherit);
    border-radius: var(--nut-card-left-border-radius, 0);
  }
  .card-right {
    flex: 1;
    padding: 0 10px 8px;
  }
  // .card-right-title{
  //   -webkit-box-orient: vertical;
  //   line-clamp: 2;
  //   overflow: hidden;
  //   word-break: break-all;
  //   line-height: 1.5;
  //   font-size: 14px;
  // }
</style>
